<template>
  <div class="news">
    <h2>News</h2>
    <router-link
      tag="button"
      :to="{ name: 'NewDetail', query: { title: '国内' } }"
      >国内新闻</router-link
    >
    <router-link
      tag="button"
      :to="{ name: 'NewDetail', query: { title: '国际' } }"
      >国际新闻</router-link
    >
    <router-link
      tag="button"
      :to="{ name: 'NewDetail', query: { title: '湖北' } }"
      >湖北新闻</router-link
    >
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
     name: "News",
  mounted() {
    console.log("News mounted");
  },
  beforeDestroy() {
    console.log("News beforeDestroy");
  },
  }

</script>

<style scoped>
.news {
  background-color: blue;
}
</style>
